import React from 'react';
import classNames from 'classnames';
import Item from './Item';
import SubMenu from './SubMenu';
import Group from './Group';

import './Menu.less';

class Menu extends React.Component {
    displayName = 'Menu';

    static defaultProps = {
        mode: 'vertical',
        level: 0,
        offset: 24,
        theme: 'light',
        accordion: false
    }

    renderMenus () {
        const {data, mode, offset, parent, onSelectMenu, onSelectSubMenu} = this.props;
        
        if (!data) {
            return null;
        }

        const isHorizontal = mode === 'horizontal';
        return data.map(item => {
            item.parent = parent;
            if (item.type === 'MenuItem') {
                return <Item onSelectMenu={onSelectMenu} offset={offset} level={isHorizontal ? 0 : this.props.level + 1} key={item.id} data={item}></Item>;
            }
            if (item.type === 'SubMenu') {
                return <SubMenu isHorizontal onSelectSubMenu={onSelectSubMenu} 
                    onSelectMenu={onSelectMenu} offset={offset} level={isHorizontal ? 0 : this.props.level + 1} 
                    key={item.id} data={item}></SubMenu>;
            }
            if (item.type === 'MenuGroup') {
                return <Group onSelectMenu={onSelectMenu} offset={offset} level={isHorizontal ? 0 : this.props.level + 1} key={item.id} data={item}></Group>;
            }
        });
    }

    render () {
        const {className, style, mode, theme} = this.props;
        const clazzName = classNames('cm-menu', className, {
            [`cm-menu-${mode}`]: !!mode,
            [`cm-menu-${theme}`]: theme
        });
        return <ul className={clazzName} style={style}>
            {this.renderMenus()}
        </ul>;
    }
}

export default Menu;
